<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!--   步骤1：引入echarts.js文件  -->
     <script type="text/javascript"  src="../community_fenji/static/echarts.min.js"></script>
  
     <!--
         步骤1：引入echarts.js文件
         步骤2：准备一个呈现图表的盒子(盒子就是div)
         步骤3：初始化echarts实例对象
         步骤4：准备配置项
         步骤5:将配置项设置给echarts实例对象
     -->
</head>
<body>
      <!--步骤2：准备一个呈现图表的盒子(盒子就是div) -->
      <div style="width: 600px;height: 400px;"></div>
      <script>
          //步骤3：初始化echarts实例对象
          //参数，dom,决定图表最终呈现的位置
          var mCharts=echarts.init(document.querySelector('div'))
  
          //步骤4：准备配置项
          var option={
              xAxis:{
                  type:'category',
                  data:['小明','小红','小王']
              },
              yAxis:{
                  type:'value',
                  show:true

              },
              series:[
                  {
                      name:'语文',
                      type:'bar',
                      data:[70,92,87]
                  }
              ]
          }
  
          //步骤5:将配置项设置给echarts实例对象
          mCharts.setOption(option)
      </script>
</body>
</html>